<template>
  <div class="thumb-example">
    <swiper :modules="[Thumbs]" :thumbs="{ swiper: thumbsSwiper }">
      <swiper-slide
        v-for="(imgItem, index) in imgList"
        :key="imgItem.id"
        :class="`img-item${index}`"
      >
        <img :src="imgItem.imgUrl" />
      </swiper-slide>
    </swiper>
    <swiper
      :modules="[Thumbs]"
      watch-slides-progress
      @swiper="setThumbsSwiper"
      :slides-per-view="5"
      :space-between="10"
      class="small-img-list"
    >
      <swiper-slide
        v-for="imgItem in imgList"
        :key="imgItem.id"
        :class="`img-item`"
      >
        <img :src="imgItem.imgUrl" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import { Thumbs } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
const thumbsSwiper = ref(null)
const setThumbsSwiper = (swiper) => {
  thumbsSwiper.value = swiper
}

// 接收父组件数据
defineProps({
  imgList: {
    type: Array
  }
})
</script>
<style lang="scss" scoped>
.small-img-list {
  margin-top: 10px;
}
</style>
